<template>
<div class="login">
	<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
	  <h3 class="title">服装后台管理系统</h3>
	  <el-form-item prop="account">
		<el-input v-model="loginForm.account" clearable prefix-icon="User"/>
	  </el-form-item>
	  <el-form-item prop="password">
		<el-input type="password" v-model="loginForm.password" clearable show-password prefix-icon="Lock"/>
	  </el-form-item>
	  <el-form-item prop="code">
		<el-input
		  v-model="loginForm.code"
		  auto-complete="off"
		  placeholder="验证码"
		  style="width: 63%"
		  @keyup.enter.native="onSubmit"
		  prefix-icon="CircleCheck"
		/>
		<div class="login-code">
		  <img :src="codeImage" @click="getCode" class="login-code-img"/>
		</div>
	  </el-form-item>
	  <el-form-item style="width: 100%;">
		<el-button type="primary" @click="onSubmit" style="width: 100%;" :loading="loading">登录</el-button>
	  </el-form-item>
	</el-form>
</div>
</template>

<script>
// import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
// import { useRouter, useRoute } from 'vue-router'
// import { ElMessage } from 'element-plus'
// import { User, Lock } from '@element-plus/icons-vue'
// const { proxy } = getCurrentInstance()
// const router = useRouter()
// const route = useRoute()

export default {
	name: 'login',
	created() {
	    this.getCode()
	},
	data() {
		return {
			loginForm: {
				account: '',
				password: '',
				code: '',
				codeId: ''  //验证码id
			},
			codeImage: '',
			loginRules: {
			  account: [
			    { required: true, trigger: "blur", message: "请输入您的账号" }
			  ],
			  password: [
			    { required: true, trigger: "blur", message: "请输入您的密码" }
			  ],
			  code: [{ required: true, trigger: "blur", message: "请输入验证码" }]
			},
			loading: false,
		}
	},
	methods: {
		getCode() {
			//拉取图片
			this.$axios.get('sys/user/login-code')
			.then(res => {
				this.$data.codeImage = res.codeImage
				this.$data.loginForm.codeId = res.codeId
			})
		},
		onSubmit() {
			this.$refs.loginForm.validate(valid => {
			  if (valid) {
			    this.$data.loading = true;
				this.$axios.post('sys/user/login', this.$data.loginForm)
				  .then(response => {
					  //console.log('登录结果:' + JSON.stringify(response))
					  if (response) {
						  this.msg.success('登录成功')
						  sessionStorage.setItem('token', response.token)
						  sessionStorage.setItem('userInfo', JSON.stringify(response))
						  this.router.push('/index')
					  }
					this.$data.loading = false;	  
				  }).catch(err => {
					  console.log(err)
					  this.$data.loading = false;	  
				  })
			  }
			});
		}
	}
}

// const onSubmit = () => {
// 	if (form.account === '') {
// 		ElMessage.error("账号不能为空")
// 		return
// 	}
// 	if (form.password === '') {
// 		ElMessage.error("密码不能为空")
// 		return
// 	}
//   proxy.$axios.post('sys/user/login', form)
//   .then(response => {
// 	  //console.log('登录结果:' + JSON.stringify(response))
// 	  if (response) {
// 		  ElMessage.success('登录成功')
// 		  sessionStorage.setItem('token', response.token)
// 		  sessionStorage.setItem('userInfo', JSON.stringify(response))
// 		  router.push('/index')
// 	  }
//   }).catch(err => {
// 	  console.log(err)
//   })
// }
</script>

<style lang="scss" scoped>
	.login {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  height: 100%;
	  background-image: url("../assets/images/login-background.jpg");
	  background-size: cover;
	}
	.title {
	  margin: 0px auto 30px auto;
	  text-align: center;
	  color: #707070;
	}
	
	.login-form {
	  border-radius: 6px;
	  background: #ffffff;
	  width: 400px;
	  padding: 25px 25px 5px 25px;
	  .el-input {
	    height: 38px;
	    input {
	      height: 38px;
	    }
	  }
	  .input-icon {
	    height: 39px;
	    width: 14px;
	    margin-left: 2px;
	  }
	}
	.login-tip {
	  font-size: 13px;
	  text-align: center;
	  color: #bfbfbf;
	}
	.login-code {
	  width: 33%;
	  height: 38px;
	  float: right;
	  img {
	    cursor: pointer;
	    vertical-align: middle;
	  }
	}
	.login-code-img {
	  height: 38px;
	}
</style>
